<template>
    <el-main>
        <el-row>
            <!-- 查询表单 -->
            <el-col :span="24">
                <el-card style="margin-bottom: 5px;" class="cardstyle2">
                    <el-row>
                        <el-col :span="9" style="margin-bottom:2px;">
                            <el-input
                                v-model="keyword"
                                clearable
                                placeholder="输入查询关键字"
                                size="mini"
                                @blur="handleSearchKeyword"
                                @clear="handleSearchKeyword"
                                @keyup.enter.native="handleSearchKeyword">
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-search"
                                    style="cursor: pointer;"
                                    @click="handleSearchKeyword"
                                ></i>
                            </el-input>
                        </el-col>
                        <el-col :span="3" style="margin-bottom:2px;">&nbsp;</el-col>
                        <el-col :span="12" style="margin-bottom:2px;">
                            <span style="font-size:14px; margin-right:10px;">提出日期</span>
                            <el-date-picker
                                v-model="issueDate"
                                type="daterange"
                                range-separator="to"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions4IssueDate"
                                size="mini"
                                @change="onChangeIssueDate"
                            ></el-date-picker>
                        </el-col>

                        <el-col :span="12" style="margin-top:5px;">
                            <span style="font-size:14px; margin-right:10px;">处理期限</span>
                            <el-date-picker
                                v-model="handleDate"
                                type="daterange"
                                range-separator="to"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions4HandleDate"
                                size="mini"
                                @change="onChangeHandleDate"
                            ></el-date-picker>
                        </el-col>
                        <el-col :span="12" style="margin-top:5px;">
                            <span style="font-size:14px; margin-right:10px;">创建日期</span>
                            <el-date-picker
                                v-model="createDate"
                                type="daterange"
                                range-separator="to"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions4CreateDate"
                                @change="onChangeCreateDate"
                                size="mini"
                            ></el-date-picker>
                        </el-col>

                        <el-col :span="24">
                            <!-- 标签选择 -->
                            <tag :checkedtags="searchTags" :showswitch="false" :displaymode="'2'"></tag>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <!-- 问题表格 -->
            <el-col :span="24">
                <el-table
                    :data="issues"
                    border
                    size="mini"
                    @sort-change="handleSort"
                    :fit="true"
                    @filter-change="handleFilter">
                    <el-table-column type="expand" fixed width="30px">
                        <template slot-scope="props">
                            <el-row>
                                <el-col :span="3">创建人: {{props.row.createBy}}</el-col>
                                <el-col :span="3">创建时间: {{props.row.createDate}}</el-col>
                                <!-- <el-col :span="3">责任人: {{props.row.importBy}}</el-col> -->
                                <el-col :span="18">
                                    标签:
                                    <el-tag
                                        size="small"
                                        v-for="(option, key) in props.row.tags"
                                        :key="key"
                                        style="margin-left:10px;"
                                        class="m-p"
                                        type="success"
                                    >{{option.optionname}}</el-tag>
                                </el-col>
                                <el-col :span="24">
                                    <div v-html="props.row.content"></div>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="ID"
                        prop="id"
                        sortable
                        width="80px"
                        :show-overflow-tooltip="true"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        label="Title"
                        prop="title"
                        sortable
                        min-width="100px"
                        :show-overflow-tooltip="true"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        label="Status"
                        prop="status"
                        column-key="status"
                        sortable
                        width="100px"
                        :formatter="formatStatus"
                        :filters="filterStatusArray"
                        filter-placement="bottom-end"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        label="处理人"
                        prop="handleBy"
                        column-key="handleBy"
                        sortable
                        width="100px"
                        :filters="filterMembersByArray"
                        filter-placement="bottom-end"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="处理期限"
                        prop="handleDate"
                        column-key="handleDate"
                        sortable
                        width="100px"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="提出人"
                        prop="issueBy"
                        column-key="issueBy"
                        sortable
                        width="100px"
                        :filters="filterMembersByArray"
                        filter-placement="bottom-end"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="提出时间"
                        prop="issueDate"
                        sortable
                        width="100px"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <!-- <el-table-column
                        label="责任人"
                        prop="importBy"
                        column-key="importBy"
                        sortable
                        width="100px"
                        :filters="filterMembersByArray"
                        filter-placement="bottom-end"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="创建人"
                        prop="createBy"
                        column-key="createBy"
                        sortable
                        width="100px"
                        :filters="filterMembersByArray"
                        filter-placement="bottom-end"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column
                        label="创建时间"
                        prop="createDate"
                        sortable
                        width="100px"
                        :show-overflow-tooltip="true"
                    ></el-table-column> -->
                    <el-table-column width="180px" fixed="right">
                        <template slot="header" slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="openAddIssueDialog(scope.$index);"
                                type="success"
                                icon="el-icon-plus"
                            ></el-button>
                        </template>
                        <template slot-scope="scope">
                            <!-- 1: Open, 2: Ready to test, 3: Close 4: Discard 5: Draft -->
                            <!-- 处理 -->
                            <el-button
                                size="mini"
                                @click="openCommentIssueDialog(scope.$index, scope.row);"
                                type="primary"
                                icon="el-icon-chat-dot-square"
                                v-if="scope.row.status!=5"
                            ></el-button>
                            <!-- 编辑 -->
                            <el-button
                                size="mini"
                                @click="openEditIssueDialog(scope.$index, scope.row);"
                                icon="el-icon-edit"
                                type="success"
                                v-if="scope.row.createBy==currentuser && scope.row.status==5"
                            ></el-button>
                            <!-- 删除 -->
                            <el-button
                                size="mini"
                                @click="handleDelete(scope.$index, scope.row);"
                                icon="el-icon-delete"
                                type="danger"
                                v-if="scope.row.createBy==currentuser && scope.row.status==5"
                            ></el-button>
                            <!-- 查看流程图 -->
                            <el-button
                                size="mini"
                                @click="showFlowImg(scope.row.id)"
                                icon="el-icon-view"
                                type="info"
                                v-if="scope.row.status!=3"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>

            <!-- 分页 -->
            <el-col :span="24">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size="queryCondition.page.pageSize"
                    background
                    :total="queryCondition.page.total"
                    :current-page="queryCondition.page.currentPage"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </el-col>
        </el-row>

        <!-- 表单 -->
        <el-dialog
            title="Creating Issue Form"
            :visible.sync="dialogFormVisible"
            :fullscreen="true"
            :before-close="handleIssueFormClose"
            class="blogFormDialog">
            <el-form
                :model="issueForm"
                ref="issueForm"
                :rules="rules"
                label-position="right"
                label-width="70px"
                size="mini" >
                <el-card shadow="hover" class="blogFormCard1">
                    <el-row>
                        <el-col :span="0">
                            <el-form-item label="ID">
                                <el-input v-model="issueForm.id"></el-input>
                                <!-- <el-select v-model="issueForm.status">
                                    <el-option
                                        v-for="s in statuses"
                                        :key="s.key"
                                        :label="s.label"
                                        :value="s.key"
                                    ></el-option>
                                </el-select> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="Title" prop="title">
                                <el-input v-model="issueForm.title" :disabled="oper=='comment'"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16">
                            <el-tag
                                size="small"
                                v-for="option in checkedtagsFinal"
                                :key="option.optionid"
                                style="margin:0 15px;"
                                type="success"
                            >{{option.optionname}}</el-tag>&nbsp;
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleTagOpen"
                                :disabled="oper=='comment'"
                            >选择标签</el-button>
                        </el-col>
                        <el-col :span="24" style="margin-bottom: 5px;">
                            <div>
                            <div id="editorToolbar" ref="editorToolbar"></div>
                            <div id="editorContent" ref="editorContent" :class="oper!='comment' ? 'enabled':'disabled'"></div>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- <el-row>
                        <el-col :span="8">
                            <el-form-item label="创建人" prop="updateBy">
                                <el-input v-model="issueForm.updateBy" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="创建日期" prop="createDate">
                                <el-date-picker
                                    v-model="issueForm.createDate"
                                    type="date"
                                    :editable="false"
                                    :clearable="false"
                                    value-format="yyyy-MM-dd"
                                    disabled
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">&nbsp;
                        </el-col>
                    </el-row> -->

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="提出人" prop="issueBy">
                                <el-select
                                    v-model="issueForm.issueBy"
                                    :disabled="oper=='comment'">
                                    <el-option
                                        v-for="eu in endusers"
                                        :key="eu.username"
                                        :label="eu.username"
                                        :value="eu.username"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="提出日期" prop="issueDate">
                                <el-date-picker
                                    v-model="issueForm.issueDate"
                                    type="date"
                                    :editable="false"
                                    :clearable="false"
                                    value-format="yyyy-MM-dd"
                                    :disabled="oper=='comment'"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="处理人" prop="handleBy">
                                <el-select
                                    v-model="issueForm.handleBy"
                                    :disabled="oper=='comment'" >
                                    <el-option
                                        v-for="eu in endusers"
                                        :key="eu.username"
                                        :label="eu.username"
                                        :value="eu.username"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="处理期限" prop="handleDate">
                                <el-date-picker
                                    v-model="issueForm.handleDate"
                                    type="date"
                                    :editable="false"
                                    :clearable="false"
                                    value-format="yyyy-MM-dd"
                                    :disabled="oper=='comment'"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-card>

                <el-card  v-show="oper=='comment'" shadow="hover" style="margin-top:5px;">
                    <div slot="header" class="clearfix">
                        <span>处理记录</span><i class="header-icon el-icon-info"></i>
                    </div>

                        <el-row>
                            <!--评论,也就是处理历史-->
                            <el-col :span="24">
                                <el-timeline>
                                    <el-timeline-item
                                        v-show="oper=='comment' && (issueForm.status!=3 && issueForm.status!=4)"
                                        :timestamp="currentuser+' : '+new Date().toISOString().substring(0, 10)"
                                        placement="top"
                                        icon="el-icon-edit"
                                        color="#0bbd87">
                                        <el-card shadow="hover" style="margin-top:5px;">
                                            <!-- 1: Open, 2: Ready to test, 3: Close 4: Discard 5: Draft -->
                                            <el-radio-group v-model="commentForm.handleResult" size="mini">
                                                <el-radio-button label="comment" v-if="issueForm.status!=3 && issueForm.status!=4">仅评论</el-radio-button>
                                                <el-radio-button label="reject" v-if="issueForm.status==1 && issueForm.handleBy==currentuser">驳回问题</el-radio-button>
                                                <el-radio-button label="solved" v-if="issueForm.status==1 && issueForm.handleBy==currentuser">解决问题</el-radio-button>
                                                <el-radio-button label="pass" v-if="issueForm.status==2 && issueForm.createBy==currentuser">验证通过</el-radio-button>
                                                <el-radio-button label="fail" v-if="issueForm.status==2 && issueForm.createBy==currentuser">验证失败</el-radio-button>
                                                <el-radio-button label="cancel" v-if="issueForm.status==5 && issueForm.createBy==currentuser">丢弃问题</el-radio-button>
                                            </el-radio-group>
                                            <div id="commentEditorToolbar" ref="commentEditorToolbar"></div>
                                            <div id="commentEditorContent" ref="commentEditorContent"></div>
                                        </el-card>
                                    </el-timeline-item>

                                    <el-timeline-item
                                        :timestamp="c.createBy + ' : ' + c.createDate"
                                        placement="top"
                                        v-for="c in issueForm.issueComments"
                                        :key="c.id"
                                        icon="el-icon-more"
                                        type="primary">
                                        <el-card class="box-card">
                                            <div slot="header" class="clearfix">
                                                <span>Answer By {{c.createBy}} at {{c.createDate}}</span>
                                            </div>
                                            <div v-html="c.content"></div>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </el-col>
                        </el-row>
                    </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="danger"  @click="handleIssueFormClose">取消</el-button>
                <el-button type="primary" @click="submitCommentIssueForm" v-show="oper=='comment' && (issueForm.status!=3 && issueForm.status!=4)">提交</el-button>

                <el-button type="primary" @click="submitAddIssueForm('draft')" v-if="oper=='add'">草稿</el-button>
                <el-button type="primary" @click="submitAddIssueForm('submit')" v-if="oper=='add'">提交</el-button>

                <el-button type="primary" @click="submitEditIssueForm('draft')" v-if="oper=='edit'">草稿</el-button>
                <el-button type="primary" @click="submitEditIssueForm('submit')" v-if="oper=='edit'">提交</el-button>
            </div>
        </el-dialog>

        <!-- 标签 -->
        <el-dialog
            title="标签"
            :visible.sync="isTagDialogVisible"
            width="80%"
            :show-close="false"
            id="tagDialog">
            <tag
                :checkedtags="checkedtagsFinal"
                v-if="isTagDialogVisible"
                :showswitch="true"
                :displaymode="'1'"
            ></tag>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleTagConfirm">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 流程实例图 -->
        <el-dialog
            title="流程图"
            :visible.sync="isFlowDialogVisible"
            v-if="isFlowDialogVisible"
            fullscreen
            :show-close="true"
            class="blogFormDialog">
            <div v-html="flowImg"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="info" @click="isFlowDialogVisible=false">关闭</el-button>
            </span>
        </el-dialog>
    </el-main>
</template>





<script>
import Vue from "vue";
import "wangeditor/release/wangEditor.min.css";
import E from "wangeditor";

const tag = () => import(`@/components/common/tag.vue`);

const statuses = [
    { key: 5, label: "Draft"},
    { key: 1, label: "Open" },
    { key: 2, label: "Solved" },
    { key: 3, label: "Close" },
    { key: 4, label: "Discard" }
];

export default {
    name: `issueMgmt`,
    data: function() {
        return {
            issues: [],
            queryCondition: {
                page: {
                    //分页控件
                    pageSize: 10, // 每页大小
                    total: 1, // 总个数,不是页数
                    currentPage: 1 // 当前页码
                },
                filters: [],
                sort: {
                    field: "createDate",
                    direction: 1 //0 asc 1 desc
                }
            },
            issueForm: {},
            commentForm: {},
            dialogFormVisible: true,

            editor: null,
            commentEditor: null,

            oper: 'add',

            rules: {
                title: [
                    {
                        required: true,
                        message: `required`,
                        trigger: `blur`
                    }
                ]
            },
            isTagDialogVisible: false,
            isFlowDialogVisible: false,
            flowImg: '',
            checkedtagsFinal: [],
            endusers: [],
            currentuser: "",
            statuses: statuses,
            filterStatusArray: [],
            filterMembersByArray: [],

            keyword: "",
            searchTags: [],
            issueDate: "",
            handleDate: "",
            createDate: "",
            loading: true,

            pickerOptions4IssueDate: {
                onPick: picker => {
                    //console.log(picker);
                    if (picker.maxDate == null || picker.minDate == null) {
                        return;
                    }

                    this.queryCondition.filters = this.queryCondition.filters.filter(
                        f => f.field != "issueDate"
                    );
                    this.queryCondition.filters.push({
                        field: "issueDate",
                        values: [
                            picker.minDate.toISOString().substring(0, 10),
                            picker.maxDate.toISOString().substring(0, 10)
                        ]
                    });
                    //console.log(JSON.stringify(this.queryCondition.filters));

                    this.loadIssues();
                }
            },
            pickerOptions4CreateDate: {
                onPick: picker => {
                    //console.log(picker);
                    if (picker.maxDate == null || picker.minDate == null) {
                        return;
                    }

                    this.queryCondition.filters = this.queryCondition.filters.filter(
                        f => f.field != "createDate"
                    );
                    this.queryCondition.filters.push({
                        field: "createDate",
                        values: [
                            picker.minDate.toISOString().substring(0, 10),
                            picker.maxDate.toISOString().substring(0, 10)
                        ]
                    });
                    //console.log(JSON.stringify(this.queryCondition.filters));

                    this.loadIssues();
                }
            },
            pickerOptions4HandleDate: {
                onPick: picker => {
                    //console.log(picker);
                    if (picker.maxDate == null || picker.minDate == null) {
                        return;
                    }

                    this.queryCondition.filters = this.queryCondition.filters.filter(
                        f => f.field != "handleDate"
                    );
                    this.queryCondition.filters.push({
                        field: "handleDate",
                        values: [
                            picker.minDate.toISOString().substring(0, 10),
                            picker.maxDate.toISOString().substring(0, 10)
                        ]
                    });
                    //console.log(JSON.stringify(this.queryCondition.filters));

                    this.loadIssues();
                }
            }
        };
    },
    components: {
        tag
    },
    watch: {
        searchTags(val) {
            //console.log(val);

            //console.log(key);
            this.queryCondition.filters = this.queryCondition.filters.filter(
                f => f.field != "tags"
            );
            this.queryCondition.filters.push({
                field: "tags",
                values: val.map(v => v.optionid)
            });
            //console.log(JSON.stringify(this.queryCondition.filters));

            this.loadIssues();
        },
        $route(to, from) {
            //表示客户具体查看某个issue
            if (typeof this.$route.params.issueid != "undefined") {
                this.handleEdit(-1, { id: this.$route.params.issueid });
            }
        }
    },
    mounted: function() {
        this.dialogFormVisible = false; // 之所以这么晃一圈, 是为了富文本编辑器能够发现对应的编辑框div dom节点.

        this.loadIssues();
        this.loadEndUsers();

        this.statuses.forEach(s => {
            this.filterStatusArray.push({ text: s.label, value: s.key });
        });

        //表示客户具体查看某个issue
        if (typeof this.$route.params.issueid != "undefined") {
            this.handleEdit(-1, { id: this.$route.params.issueid });
        }
    },
    methods: {
        openAddIssueDialog(index) {
            this.dialogFormVisible = true;
            this.oper = 'add';

            // 渲染编辑器
            this.initEditor();
            // this.initCommentEditor();
            
            let d = new Date().toISOString().substring(0, 10);
            this.issueForm = {
                id: "",
                status: 5, //1: Open, 2: Ready to test, 3: Close 4: Discard 5: Draft
                title: "",
                content: "",
                issueBy: this.currentuser,
                handleBy: this.currentuser,
                //importBy: this.currentuser,
                createBy: this.currentuser,
                updateBy: this.currentuser,
                issueDate: d,
                handleDate: d,
                createDate: d,
                updateDate: d,
                issueComments: []
            };
            this.checkedtagsFinal = [];
            // this.commentForm = {
            //     content: "",
            //     issueid: "",
            //     handleResult: "comment"
            // };

            if (this.editor != null) {
                this.editor.txt.html("");
                this.editor.$textElem.attr("contenteditable", true);
            }
            // if (this.commentEditor != null) {
            //     this.commentEditor.txt.html("");
            //     this.commentEditor.$textElem.attr("contenteditable", false);
            // }
        },
        submitAddIssueForm(draft) {
            this.$refs.issueForm.validate(valid => {
                if (this.issueForm.content == null || this.issueForm.content == "") {
                    this.$message({
                        message: "问题内容不能为空",
                        type: "warning"
                    });
                    return false;
                }
                if (valid) {
                    this.issueForm.tags = this.checkedtagsFinal;
                    Vue.axios({
                        method: `POST`,
                        url: draft=='draft' ? `/api/admin/issueadmin/adddraftissue` : `/api/admin/issueadmin/submitnewdraftissue`,
                        data: this.issueForm
                    })
                        .then(response => {
                            // console.log(JSON.stringify(response));
                            if (response.status === 200) {
                                this.$message({
                                    message: this.$t(`message.save.success`),
                                    type: `success`
                                });
                                this.loadIssues();
                                this.issueForm = {};
                                return;
                            }
                            throw error;
                        })
                        .catch(error => {
                            this.$router.push("/ui/login");
                        });
                    this.handleIssueFormClose();
                    return false;
                }
                return false;
            });
        },
        openEditIssueDialog(index, row) {
            this.oper = 'edit';
            this.checkedtagsFinal = [];

            Vue.axios({
                method: `GET`,
                url: `/api/admin/issueadmin/query/getIssue/${row.id}`
            }).then(response => {
                //console.log(JSON.stringify(response.data));
                if (response.status === 200) {
                    this.dialogFormVisible = true;

                    // 渲染编辑器
                    this.initEditor();
                    // this.initCommentEditor();

                    this.issueForm = response.data;
                    // this.issueForm.issueComments.reverse();

                    if (this.editor != null) {
                        this.editor.txt.html(response.data.content);
                        this.editor.$textElem.attr("contenteditable", true);
                    }

                    // if (this.commentEditor != null) {
                    //     this.commentEditor.txt.html("");
                    // }
                    // this.commentForm = {
                    //     content: "",
                    //     issueid: this.issueForm.id,
                    //     handleResult: "comment"
                    // };

                    this.checkedtagsFinal = this.issueForm.tags;

                    // console.log(this.issueForm);
                    // console.log(this.commentForm)
                }
            });
        },
        submitEditIssueForm(draft) {
            //console.log(this.issueForm);
            this.$refs.issueForm.validate(valid => {
                if (this.issueForm.content == null || this.issueForm.content == "") {
                    this.$message({
                        message: "问题内容不能为空",
                        type: "warning"
                    });
                    return false;
                }
                if (valid) {
                    //this.issueForm.content = this.editor.getData();
                    this.issueForm.tags = this.checkedtagsFinal;
                    Vue.axios({
                        method: `POST`,
                        url: draft=='draft' ? `/api/admin/issueadmin/editolddraftissue` : `/api/admin/issueadmin/submitolddraftissue`,
                        data: this.issueForm
                    })
                        .then(response => {
                            // console.log(JSON.stringify(response));
                            if (response.status === 200) {
                                this.$message({
                                    message: this.$t(`message.save.success`),
                                    type: `success`
                                });
                                this.loadIssues();
                                this.issueForm = {};
                                return;
                            }
                            throw error;
                        })
                        .catch(error => {
                            this.$router.push("/ui/login");
                        });
                    this.handleIssueFormClose();
                    return false;
                }
                return false;
            });
        },
        openCommentIssueDialog(index, row) {
            this.oper = 'comment';
            this.checkedtagsFinal = [];

            Vue.axios({
                method: `GET`,
                url: `/api/admin/issueadmin/query/getIssue/${row.id}`
            }).then(response => {
                //console.log(JSON.stringify(response.data));
                if (response.status === 200) {
                    this.dialogFormVisible = true;

                    // 渲染编辑器
                    this.initEditor();
                    this.initCommentEditor();

                    this.issueForm = response.data;
                    this.issueForm.issueComments.reverse();

                    if (this.editor != null) {
                        this.editor.txt.html(response.data.content);
                        this.editor.$textElem.attr("contenteditable", false);
                    }
                    if (this.commentEditor != null) {
                        this.commentEditor.txt.html("");
                        this.commentEditor.$textElem.attr("contenteditable", true);
                    }

                    this.commentForm = {
                        content: "",
                        issueid: this.issueForm.id,
                        handleResult: "comment"
                    };

                    this.checkedtagsFinal = this.issueForm.tags;

                    // console.log(this.issueForm);
                    // console.log(this.commentForm)
                }
            });
        },
        submitCommentIssueForm() {
                if (this.commentForm.content == null || this.commentForm.content == "") {
                    this.$message({
                        message: "问题处理记录内容不能为空",
                        type: "warning"
                    });
                    return false;
                }
                    Vue.axios({
                        method: `POST`,
                        url: `/api/admin/issueadmin/handleissue`,
                        data: this.commentForm
                    })
                        .then(response => {
                            // console.log(JSON.stringify(response));
                            if (response.status === 200) {
                                this.$message({
                                    message: this.$t(`message.save.success`),
                                    type: `success`
                                });
                                this.loadIssues();
                                this.commetForm = {};
                                return;
                            }
                            throw error;
                        })
                        .catch(error => {
                            this.$router.push("/ui/login");
                        });
            this.handleIssueFormClose();
        },
        handleDelete(index, row) {
            this.$confirm(
                this.$t(`message.delete.confirm`),
                this.$t(`message.delete.warn`),
                {
                    type: `warning`,
                    callback: (action, instance) => {
                        if (action === "confirm") {
                            Vue.axios({
                                method: `GET`,
                                url: `/api/admin/issueadmin/deleteIssue/${
                                    row.id
                                }`
                            })
                                .then(response => {
                                    // console.log(JSON.stringify(response));
                                    if (response.status === 200) {
                                        this.$message({
                                            type: `success`,
                                            message: this.$t(
                                                `message.delete.success`
                                            )
                                        });

                                        this.loadIssues();
                                        return;
                                    }
                                    throw error;
                                })
                                .catch(error => {
                                    this.$router.push("/ui/login");
                                });
                        }
                        //this.isTypeInputVisible = false;
                    }
                }
            );
        },
        handleSort(event) {
            this.queryCondition.sort.field = event.prop;
            if (event.order === "ascending") {
                this.queryCondition.sort.direction = 0;
            } else {
                this.queryCondition.sort.direction = 1;
            }
            //console.log(this.queryCondition);
            this.loadIssues();
        },
        handleFilter(filters) {
            for (let key in filters) {
                //console.log(key);
                this.queryCondition.filters = this.queryCondition.filters.filter(
                    f => f.field != key
                );
                this.queryCondition.filters.push({
                    field: key,
                    values: filters[key]
                });
                //console.log(JSON.stringify(this.queryCondition.filters));
                this.loadIssues();
            }
        },
        handleIssueFormClose() {
            this.dialogFormVisible = false;
            //console.log('hhh')
            this.$router.push("/ui/admin/issue");
        },
        handleCurrentChange(value) {
            this.queryCondition.page.currentPage = value;
            this.loadIssues();
        },
        loadIssues() {
            this.loading = true;
            // list issues
            Vue.axios({
                method: `POST`,
                url: `/api/admin/issueadmin/query/listIssues`,
                data: this.queryCondition
            })
                .then(response => {
                    //console.log(JSON.stringify(response.data));

                    this.queryCondition.page = response.data.page;
                    this.queryCondition.sort = response.data.sort;
                    this.queryCondition.filters = response.data.filters;

                    this.issues = response.data.data;
                    this.loading = false;
                })
                .catch(error => {
                    //console.log(error);
                    this.loading = false;
                    this.$router.push("/ui/login");
                });
        },
        initEditor() {
            // 渲染编辑器
            if (this.editor === null) {
                this.editor = new E(
                    this.$refs.editorToolbar,
                    this.$refs.editorContent
                );
                this.editor.customConfig.onchange = html => {
                    this.issueForm.content = html;
                };
                this.editor.customConfig.uploadFileName = "file";

                // 使用 base64 保存图片
                this.editor.customConfig.uploadImgShowBase64 = true;
                //设置够大, 否则卡死
                this.editor.customConfig.uploadImgTimeout = 50000;

                this.editor.create();
            }
        },
        initCommentEditor() {
            // 渲染编辑器
            if (this.commentEditor === null) {
                this.commentEditor = new E(
                    this.$refs.commentEditorToolbar,
                    this.$refs.commentEditorContent
                );
                this.commentEditor.customConfig.onchange = html => {
                    this.commentForm.content = html;
                };
                this.commentEditor.customConfig.uploadFileName = "file";

                // 使用 base64 保存图片
                this.commentEditor.customConfig.uploadImgShowBase64 = true;
                //设置够大, 否则卡死
                this.commentEditor.customConfig.uploadImgTimeout = 50000;

                this.commentEditor.create();
            }
        },
        handleTagOpen() {
            this.isTagDialogVisible = true;
        },
        handleTagConfirm() {
            this.isTagDialogVisible = false;
        },
        loadEndUsers() {
            Vue.axios
                .get(`/api/admin/enduser/query/listEndUsers`)
                .then(response => {
                    this.currentuser = response.headers.currentuser;
                    //console.log( this.issueForm.issueBy)
                    //console.log(JSON.stringify(response));
                    if (response.status === 200) {
                        this.endusers = response.data;
                        //this.endusers.splice(0, 1);

                        this.endusers.forEach(u => {
                            this.filterMembersByArray.push({
                                text: u.username,
                                value: u.username
                            });
                        });
                        return;
                    }
                    throw error;
                })
                .catch(error => {
                    this.$router.push("/ui/login");
                });
        },
        formatStatus(row, column, cellValue) {
            let formatValue = null;
            this.statuses.every(status => {
                if (status.key == cellValue) {
                    formatValue = status.label;
                    return false;
                }
                return true;
            });
            return formatValue;
        },
        handleSearchKeyword() {
            this.queryCondition.filters = this.queryCondition.filters.filter(
                f => f.field != "keyword"
            );
            this.queryCondition.filters.push({
                field: "keyword",
                values: [this.keyword]
            });
            //console.log(JSON.stringify(this.queryCondition.filters));

            this.loadIssues();
        },
        onChangeCreateDate(event) {
            if (event == null) {
                this.queryCondition.filters = this.queryCondition.filters.filter(
                    f => f.field != "createDate"
                );
                //console.log(JSON.stringify(this.queryCondition.filters));
                this.loadIssues();
            }
        },
        onChangeHandleDate(event) {
            if (event == null) {
                this.queryCondition.filters = this.queryCondition.filters.filter(
                    f => f.field != "handleDate"
                );
                //console.log(JSON.stringify(this.queryCondition.filters));
                this.loadIssues();
            }
        },
        onChangeIssueDate(event) {
            if (event == null) {
                this.queryCondition.filters = this.queryCondition.filters.filter(
                    f => f.field != "issueDate"
                );
                //console.log(JSON.stringify(this.queryCondition.filters));
                this.loadIssues();
            }
        },
        showFlowImg(issueId) {
            //alert(issueId)
            Vue.axios({
                method: `GET`,
                url: `/api/admin/issueadmin/showFlowImg/${issueId}`,
            })
                .then(response => {
                    //console.log(JSON.stringify(response.data));
                    this.flowImg = response.data;
                    this.isFlowDialogVisible = true;
                })
                .catch(error => {
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
#editorContent {
    border: 1px solid #ccc;
}
#commentEditorContent {
    border: 1px solid #ccc;
}
</style>

<style lang="stylus">
#editorContent .w-e-text {
    min-height: 150px !important;
    overflow-y: hidden !important;
}
.enabled .w-e-text {
    background-color: white;
}
.disabled .w-e-text {
    background-color: whitesmoke;
}
#commentEditorContent .w-e-text {
    min-height: 50px !important;
    overflow-y: hidden !important;
    background-color: white;
}

.blogFormDialog .el-dialog__body {
    padding: 0px;
}

.blogFormDialog .el-dialog__footer {
    position: sticky;
    bottom: 0px;
    z-index: 9999999 !important;
}


#tagDialog .el-dialog__header {
    padding: 5px !important;
}
#tagDialog .el-dialog__body {
    padding: 5px !important;
}

#tagDialog .el-dialog__footer {
    padding: 5px !important;
    position: sticky;
    bottom: 0px;
}

.blogFormCard1 .el-card__body {
    padding: 5px 20px 0px 20px !important;
    background-color: whitesmoke;
}

.cardstyle2 .el-card__body {
    padding: 5px 20px 5px 20px !important;
}
</style>

 